<template>
  <div id="loginContainer">
    <div class="wrapper fadeInDown">
      <div @submit="void 0" id="formContent" v-loading="loading">
        <h2 class="active"> 请登录您的帐号 </h2>
        <div class="fadeIn first">
          <img src="../../assets/img/login_head_icon.svg" id="icon" alt="User Icon"/>
        </div>
        <div>
          <el-form style="padding: 0 70px;margin-top: 50px">
            <el-form-item>
              <el-input clearable v-model="form.username" placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item>
              <el-input show-password clearable v-model="form.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item>
              <div style="display: flex">
                <el-input style="flex: 1" @keyup.native.enter="login" v-model="form.captcha"
                          placeholder="请输入验证码"/>
                <img style="cursor: pointer;" :src="captchaImg" alt="" @click="updateCaptcha">
              </div>
            </el-form-item>
          </el-form>
          <el-button @click="login" style="margin-bottom: 10px;width: 100px" type="primary">登录</el-button>
        </div>
        <div id="formFooter">
          <a class="underlineHover" @click="$refs.dialog.open()">企业注册</a>
        </div>

      </div>
    </div>
    <register-dialog ref="dialog"/>
  </div>
</template>

<script>
import {requestByGet, requestByPost} from "@/utils/request";
import {url2Params} from "vijay-util"
import {CommonStore} from "@/store";
import RegisterDialog from "@/components/dialog/register-dialog";

export default {
  name: "loginContainer",
  components: {RegisterDialog},
  data() {
    return {
      loading: false,
      userNameFocus: false,
      passWordFocus: false,
      captchaImg: "",
      form: {
        username: "",
        password: "",
        captcha: "",
      },
    }
  },
  computed: {},
  methods: {
    async updateCaptcha() {
      this.captchaImg = await requestByGet(`sys/randomImage/login`);
    },
    async login() {
      const {token, userInfo} = await requestByPost(`sys/login`, {...this.form, checkKey: "login"});
      CommonStore.userInfo = userInfo;
      sessionStorage.setItem("X-Access-Token", token);
      this.$message.success("登录成功！");
      return this.$router.replace("/");
    }
  },
  created() {
    this.updateCaptcha();
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/login";

.captcha {
  display: inline-block;
  cursor: pointer;
  width: 100px;
  border: 1Px solid #ccc;
  margin-left: 10px;
  border-radius: 3px;
  overflow: hidden;
}
</style>
